<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>详细内容</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/common.css" type="text/css">
    <%--<link rel="stylesheet" href="${frames}/css/picker.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${newframe}/css/select2.min.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${newframe}/css/beautify-time.css" type="text/css">--%>
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.scss">
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
    <script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>
    <script src="${newframe}/js/select2.full.zh.js"></script>
    <style>
        body{
            width:760px;
            overflow:hidden;
        }
        .test{
            width:100%;
            overflow:hidden;
        }
        .test p{
            width:100%;
            line-height:100px;
            font-size:15px;
            text-align:center;
        }
        #change{
            position:fixed;
            bottom:16px;
            right:16px;
        }
        label{
            margin-left:5px;
        }
        .text_number input{
            border:1px solid #d0d0d0;
            width:135px;
            height:30px;
        }
        .title{
            line-height:25px;
            font-size:16px;
            color:#666666;
            margin-left:10px;
        }
        .title1{
            line-height:25px;
            font-size:15px;
            color:#666666;
            margin-left:17px;
            margin-top:5px;
        }
        .text_content{
            margin:20px 0;
            margin-left:18px;
        }
        .text_content div{
            width:49%;
            text-align: left;
            display: inline-block;
        }
        .text_number{
            color:#666666;
            margin-left:10px;
        }
        .bootstrapDatepickr-cal{
            top:465px !important;
        }
        #keep{
            background:#35acfd !important;
        }
        .change{
            position:fixed;
            top:90%;
            width:100%;
        }
        .btn{
            width:100px;
            line-height: 15px;
            background: #35acfd;
            color: white;
        }
        .modal-footer{
            width:255px;
            margin:0 auto;
        }
        img{
            max-width:100%;
            height:auto;
        }
        span,label{
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }
        #szyValue{
            position:absolute;
        }
        .height_unit{
            position:relative;
            left:150px;
            border-left:1px solid #d0d0d0;
            width:40px;
            display:inline-block;
            text-align:center;
            line-height:30px;
        }
        .text_content .gzhId{
            position:absolute;
            width:180px;
            height:30px;
        }
        .test input{
            border: solid 1px #d0d0d0;
            width:180px !important;
            height:30px !important;
            vertical-align:middle;
            height:30px;
            display:inline-block !important;
        }
        .height_unit1{
            position:relative;
            left:125px;
            width:40px;
            display:inline-block;
            text-align:center;
            line-height:30px;
        }
        .height_unit2{
            position:relative;
            left:20px;
            width:40px;
            display:inline-block;
            text-align:center;
            line-height:30px;
        }
        h1{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            color: #2a3137;
            margin-bottom: 26px;
            float: left;
        }
        .defualt{
            border:1px solid red;
        }
        .feritin .types input{
            width:20px !important;
            height:20px !important;
            background:white;
            vertical-align: middle;
            margin-bottom:7px;
        }
        input[type=radio] {
            -webkit-appearance: none;
            border-radius:50%;
            background-image: url('../assets/images/nocheck.png');
            background-size:100% 100%
        }
        input[type=radio]:checked{
            background-image: url('../assets/images/checkout.png');
            background-size:100% 100%
        }
        .types{
            width:22%;
            display:inline-block;
            margin-bottom:10px;
        }
        .times{
            display:inline-block;
            width:150px;
        }
        .text_number{
            width:135px;
            display:inline-block;
        }
        .defualt{
            border:1px solid red !important;
        }
        .propmt{
            font-size:12px !important;
            line-height:35px !important;
            text-align:left !important;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>骨松信息</h1>
</div>
<div class="test">
    <span style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
    <span class="title">最后一次骨松检测</span>
    <div class="text_content">
        <div>
            <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                <img src="../assets/images/dlcs.png" alt="">
            </span>
            <span class="text_number">定量超声</span>
            <input type="text" class="form-control" id="ultrasonic" onkeyup="gmdInput(this)" placeholder="请输入数值">
        </div>
        <div>
            <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                <img src="../assets/images/gmd.png" alt="">
            </span>
            <span class="text_number">骨密度</span>
            <input type="text" class="form-control" id="DXA" onkeyup="gmdInput(this)" placeholder="请输入数值">
        </div>
        <div style="margin-top:18px;">
            <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                <img src="../assets/images/P1NP.png" alt="">
            </span>
            <span class="text_number">骨转换指标P1NP</span>
            <input type="text" class="form-control gzhId" id="P1NP" onkeyup="gmdInput(this)" placeholder="请输入数值">
            <span class="height_unit1">ng/ml</span>
        </div>
        <div style="margin-top:18px;">
            <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                <img src="../assets/images/ctx.png" alt="">
            </span>
            <span class="text_number">骨转换指标β-CTX</span>
            <input type="text" class="form-control gzhId" id="βCTX" onkeyup="gmdInput(this)" placeholder="请输入数值">
            <span class="height_unit1">ng/ml</span>
        </div>
    </div>
    <div style="margin-top:10px;" id="classillness">
        <span class="title1" style="color:#a9a9a9;float:left;">胸腰椎X侧位片结果描述</span>
        <div style="display:inline-block;float:left;margin-left:16px;">
            <textarea class="form-control" placeholder="请输入内容" id="message" style="width:540px !important;height:80px;"></textarea>
        </div>
    </div>
</div>
<div class="test">
    <span style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
    <span class="title">其他信息</span>
    <div class="feritin">
        <div style="width:100%;overflow:hidden;">
            <div style="margin-top:10px;" id="classillness">
                <span class="title1" style="color:#a9a9a9;margin-right:40px;">时间段</span>
                <div style="display:inline-block;vertical-align: top;width:85%;" >
                    <span class="types"  style="margin-left:15px;">
                        <input type="radio" value="首次" name="class" id="tn1" checked="true">
                        <label for="tn1">首次</label>
                    </span>
                    <span class="types">
                        <input type="radio" value="3月" name="class" id="tn2">
                        <label for="tn2">3月</label>
                    </span>
                    <span class="types">
                        <input type="radio" value="6月" name="class" id="tn3">
                        <label for="tn3">6月</label>
                    </span>
                    <span class="types">
                        <input type="radio" value="12月" name="class" id="tn4">
                        <label for="tn4">12月</label>
                    </span>
                    <span class="types" style="margin-left:15px;">
                        <input type="radio" value="18月" name="class" id="tn5">
                        <label for="tn5">18月</label>
                    </span>
                    <span class="types">
                        <input type="radio" value="24月" name="class" id="tn6">
                        <label for="tn6">24月</label>
                    </span>
                </div>
            </div>
            <div style="margin-top:10px;" id="classillness">
                <span class="title1" style="color:#a9a9a9;float:left;">测试时间</span>
                <div style="display:inline-block;float:left;margin-left:40px;">
                    <div>
                        <div class="times">
                            <div id="PrevTime" class="input-group date form_date" style="width: 100%"  data-date-format="yyyy-mm-dd">
                                <input id="testDate" type="text" class="lay-date" placeholder="  开始日期" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <p class="message" style="width:100%;text-align:center;color:red;display:none;">请选择并发症!</p>
</div>
<div class="change">
    <div class="form-group submitBtn" style="text-align: center ">
        <button type="button" class="btn" data-dismiss="modal" id="closeModalButt" onclick="closeFrame()">
            关闭
        </button>
        <button type="submit" class="btn" id="keep"  onclick="keep()" style="margin-left:20px;">保存</button>
    </div>
</div>
<script>
    // 初始化
    var diseasesType = ''
    var url = ''
    var type = "";
    var idCard = '';
    function gmdInput(e){
        // 骨密度
        if( e.getAttribute('id') == 'DXA' ){
            e.value = e.value.replace(/[^\-?\d.]/g,'')
        }else if(  e.getAttribute('id') == 'ultrasonic' ){
            // 定量超声
            e.value = e.value.replace(/[^\-?\d.]/g,'')
        }else if ( e.getAttribute('id') == 'P1NP' ){
            // 骨转换指标P1NP
            // e.value = e.value.replace(/[^\d]/g,'')
            e.value = e.value.replace(/[^\d.]/g,'')
        }else if ( e.getAttribute('id') == 'βCTX' ){
            // 骨转换指标P1NP
            // e.value = e.value.replace(/[^\d]/g,'')
            e.value = e.value.replace(/[^\d.]/g,'')
        }

    }
    function initLayDate(id) {
        laydate({
            elem: id,
            istime: true,
            format: 'YYYY-MM-DD',
            choose: function (dates) { //选择好日期的回调

            }
        })
    }
    // boot时间选择器插件
    $(document).ready(function() {
        initLayDate('#testDate');
    });
    $(function(){
        var inputs = $('input')
        for( var a = 0; a < inputs.length; a++ ){
            $(inputs[a]).bind('change',function(){
                if( $(this).val() != '' ){
                    $(this).removeClass('defualt')
                }
            })
        }
        // 初始化获取当前时间
        var date=new Date();
        var year=date.getFullYear(); //获取当前年份
        var mon=date.getMonth()+1; //获取当前月份
        if( parseInt(mon) < 10 ){
            mon = '0' + mon
        }
        var da=date.getDate(); //获取当前日
        if( parseInt(da) < 10 ){
            da = '0' + da
        }
        var d=document.getElementById('testDate');
        d.value = year + '-' + mon + '-' + da
        // 获取url 的idcard
        var href = location.search.split('?')[1]
        console.log(href)
        url = href.split('&')[0].split('=')[1]
        idCard = href.split('&')[1].split('=')[1];
        diseasesType = href.split('&')[1].split('=')[1]
        type = href.split('&')[2].split('=')[1]
        console.log(type)
    })
    //关闭并刷新
    function closeFrame() {
        window.parent.simpleCloseModal();
    }
    function keep(){
        // 获取数据
        var P1NP = $('#P1NP').val();
        var βCTX = $('#βCTX').val();
        var testDate = $('#testDate').val();
        var ultrasonic = $('#ultrasonic').val();
        var DXA = $('#DXA').val();
        var message = $('#message').val()
        var testTimes = $("input[type='radio']:checked").val();
        if( P1NP === "" || βCTX === "" || testDate === "" || ultrasonic == '' || DXA == "" || message == "" ){
            var inputs = $('input')
            var arr = []
            for( var a = 0; a < inputs.length; a++ ){
                if( $(inputs[a]).val() === '' ){
                    $(inputs[a]).attr('placeholder','请输入数值')
                    $(inputs[a]).addClass('defualt')
                    arr.push($(inputs[a]))
                }
            }
            if( $('#message').val() == '' ){
                $('#message').attr('placeholder','请输入内容')
                $('#message').addClass('defualt')
            }else{
                $('#message').removeClass('defualt')
            }
            arr[0].focus()
            $(arr[0]).removeClass('defualt')
            return
        }else if( parseInt(P1NP) > 40 || parseInt(βCTX) > 40 || parseInt(ultrasonic) > 0 || parseInt(ultrasonic) < -3 || parseInt(DXA) > 0 || parseInt(DXA) < -3 ){
            if( parseInt(P1NP) > 40 ){
                $('#P1NP').val('')
                $('#P1NP').attr('placeholder','输入范围为0-40')
                $('#P1NP').addClass('defualt')
            }else{
                $('#P1NP').removeClass('defualt')
            }
            if( parseInt(βCTX) > 40 ){
                $('#βCTX').val('')
                $('#βCTX').attr('placeholder','输入范围为0-40')
                $('#βCTX').addClass('defualt')
            }else{
                $('#βCTX').removeClass('defualt')
            }
            if( parseInt(ultrasonic) > 0 || parseInt(ultrasonic) < -3  ){
                $('#ultrasonic').val('')
                $('#ultrasonic').attr('placeholder','输入范围为-3-0')
                $('#ultrasonic').addClass('defualt')
            }else{
                $('#ultrasonic').removeClass('defualt')
            }
            if( parseInt(DXA) > 0 || parseInt(DXA) < -3 ){
                $('#DXA').val('')
                $('#DXA').attr('placeholder','输入范围为-3-0')
                $('#DXA').addClass('defualt')
            }else{
                $('#DXA').removeClass('defualt')
            }
            return
        }
        $.ajax({
            url:"${URL_BLONELOOSE_SAVE}",
            dataType:"json",
            type:"post",
            data:{
                idCard:idCard,
                testTimes:testTimes,
                testDate:testDate,
                ultrasonic:ultrasonic,
                DXA:DXA,
                message:message,
                P1NP:P1NP,
                βCTX:βCTX
            },
            success:function(data){
                console.log(data)
                if( data.success ){
                    // 刷新当前页面
                    parent.showSrc('${URL_PATIENT_TOARCHIVES}?idCard=' + idCard +'&diseasesType='+'4'+'&type='+type+'&rarefaction=')
                    window.parent.simpleCloseModal();
                }
            }
        })
    }
</script>
</body>
</html>

